<template>
<el-col :span="12">
  <div class="bg-purple-light">
          <div ref="chart1" style="height: 450px" class="w"></div>
        </div>
      </el-col>
</template>

<script>
import * as echarts from "echarts";
export default {
mounted(){
    var myChart1 = echarts.init(this.$refs.chart1);
    var option;

   option = {
  legend: {
    top: 'bottom'
  },
  title: {
        text: "房产地域分布",
      },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 180],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: '广州' },
        { value: 38, name: '衡阳' },
        { value: 32, name: '长沙' },
        { value: 30, name: '合肥' },
        { value: 28, name: '澳门' },
        { value: 26, name: '珠海' },
        { value: 22, name: '重庆' },
        { value: 18, name: '大理' }
      ]
    }
  ]
};

    option && myChart1.setOption(option);
}
}
</script>

<style scoped>
.w {
  width: 800px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
  margin: 20px 20px 0 0px;
  border-radius: 5px;
}
</style>